import React from 'react';
import { CategoryItem } from '../wangTypes/index';
import { Image } from "antd";
const Category: React.FC = () => {
  const categories: CategoryItem[] = [
    { id: 1, name: '华为手机', icon: <Image preview={false} width={50} src='https://res4.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_4283274C870772C2A8F7657A3D8735EF.png'/> },
    { id: 2, name: '鸿蒙智行', icon: <Image preview={false} width={50} src='https://res.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_585E578E398628A79E520B26EF5A1B95.png'/> },
    { id: 3, name: '鸿蒙智家', icon: <Image preview={false} width={50} src='https://res7.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_6E3F93EB4892E7EF381AF1AE3DBFD7C3.png' /> },
    { id: 4, name: '智慧办公', icon: <Image preview={false} width={50} src='https://res.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_45C0163365DB64882C2FD213ACD8A06E.png'/> },
    { id: 5, name: '影音娱乐', icon: <Image preview={false} width={50} src='https://res.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_D63B5EE642F9D4029EBE832E00A06464.png'/> },
    { id: 6, name: '运动健康', icon: <Image preview={false} width={50} src='https://res.vmallres.com/pimages/uomcdn/CN/pms/202303/gbom/6941487288496/800_800_34F8E36EA881B383D0AA09729C0A4633mp.png'/> },
    { id: 7, name: '企业商用', icon:  <Image preview={false} width={50} src='https://res1.vmallres.com/pimages/uomcdn/CN/pms/202410/gbom/6942103140525/428_428_FBE31ABF4A4A130A256BC42F159A4E68mp.png' /> },
    { id: 8, name: '配件', icon: <Image preview={false} width={50} src='https://res.vmallres.com/pimages/uomcdn/CN/pms/202408/gbom/6942103127588/800_800_905BDF880F44A3C203B544D24005BAF8mp.png'/> },
    { id: 9, name: '华为智选', icon: <Image preview={false} width={50} src='https://res.vmallres.com/pimages/uomcdn/CN/pms/202409/gbom/6971943681158/800_800_2BD71B23D1367FCB6B59BA3B51BBD08Cmp.png' /> },
    { id: 10, name: '生态周边', icon: <Image preview={false} width={50} src='https://res.vmallres.com/pimages/FssCdnProxy/vmall_bop_server/BopMaterialCenter/800_800_8AED4B708757096A65046A0A91D749C2.png' /> },
  ];

  return (
    <div className="category">
      {categories.map((item) => (
        <div key={item.id} className="category-item">
          <div style={{ fontSize: '30px', marginBottom: '10px' }}>{item.icon}</div>
          <div>{item.name}</div>
        </div>
      ))}
    </div>
  );
};

export default Category;